<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="logo">首页</div>
      <el-menu
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
      >

      </el-menu>
      <div class="user-info">
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-avatar :size="40" :src="user.avatar" />
            {{ user.name }}
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>设置</el-dropdown-item>
              <el-dropdown-item divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <!-- 主要内容区 -->
    <el-main class="main-content">
      <!-- 数据概览卡片 -->
      <el-row :gutter="20" class="overview-cards">
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="card-content">
              <div class="card-icon" style="background-color: #409eff;">
                <i class="el-icon-office-building"></i>
              </div>
              <div class="card-info">
                <div class="card-title">总房源数</div>
                <div class="card-value">{{ overview.totalHouses }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="card-content">
              <div class="card-icon" style="background-color: #67c23a;">
                <i class="el-icon-user"></i>
              </div>
              <div class="card-info">
                <div class="card-title">租客数量</div>
                <div class="card-value">{{ overview.totalTenants }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="card-content">
              <div class="card-icon" style="background-color: #e6a23c;">
                <i class="el-icon-document"></i>
              </div>
              <div class="card-info">
                <div class="card-title">有效合同</div>
                <div class="card-value">{{ overview.activeContracts }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="card-content">
              <div class="card-icon" style="background-color: #f56c6c;">
                <i class="el-icon-money"></i>
              </div>
              <div class="card-info">
                <div class="card-title">本月收入</div>
                <div class="card-value">¥{{ overview.monthlyIncome }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表区域 -->
      <el-row :gutter="20" class="chart-area">
        <el-col :span="16">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>房源状态统计</span>
                <el-select v-model="chartFilter" size="small" style="width: 120px;">
                  <el-option label="本月" value="month"></el-option>
                  <el-option label="本季度" value="quarter"></el-option>
                  <el-option label="本年" value="year"></el-option>
                </el-select>
              </div>
            </template>
            <div id="houseStatusChart" style="height: 300px;"></div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>空置率</span>
              </div>
            </template>
            <div id="vacancyRateChart" style="height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 最近活动 -->
      <el-card shadow="hover" class="recent-activity">
        <template #header>
          <div class="card-header">
            <span>最近活动</span>
            <el-button type="text" @click="toggleActivityView">
              {{ showAllActivities ? '收起' : '查看全部' }}
            </el-button>
          </div>
        </template>
        <el-timeline>
          <el-timeline-item
              v-for="(activity, index) in visibleActivities"
              :key="index"
              :timestamp="activity.time"
              placement="top"
          >
            <el-card>
              <h4>{{ activity.title }}</h4>
              <p>{{ activity.content }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-main>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import * as echarts from 'echarts'

export default {
  name: 'HomePage',
  setup() {
    // 用户信息
    const user = ref({
      name: '管理员',
      avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    })

    // 数据概览
    const overview = ref({
      totalHouses: 128,
      totalTenants: 96,
      activeContracts: 85,
      monthlyIncome: '68,500'
    })

    // 图表筛选
    const chartFilter = ref('month')

    // 最近活动
    const recentActivities = ref([
      {
        title: '新租客签约',
        content: '租客张三签约了阳光花园3栋502室，合同期1年',
        time: '2023-05-15 14:30'
      },
      {
        title: '租金到账',
        content: '收到李四支付的5月份租金3500元',
        time: '2023-05-10 09:15'
      },
      {
        title: '房源新增',
        content: '新增一套房源：城市花园2栋301室，2室1厅',
        time: '2023-05-08 16:45'
      },
      {
        title: '合同到期提醒',
        content: '王五的合同将于2023-06-30到期，请及时处理',
        time: '2023-05-05 11:20'
      },
      {
        title: '维修完成',
        content: '阳光花园1栋201室维修完成，已恢复出租状态',
        time: '2023-05-03 15:10'
      },
      {
        title: '租金调整',
        content: '城市花园3栋102室租金调整为3800元/月',
        time: '2023-05-01 10:30'
      },
      {
        title: '新租客咨询',
        content: '新租客赵六咨询了阳光花园2栋302室',
        time: '2023-04-28 13:45'
      },
      {
        title: '合同续签',
        content: '租客钱七续签了城市花园1栋101室，合同期1年',
        time: '2023-04-25 16:20'
      }
    ])

    // 是否显示所有活动
    const showAllActivities = ref(false)

    // 计算显示的最近活动
    const visibleActivities = computed(() => {
      return showAllActivities.value
          ? recentActivities.value
          : recentActivities.value.slice(0, 4)
    })

    // 切换活动视图
    const toggleActivityView = () => {
      showAllActivities.value = !showAllActivities.value
    }

    // 初始化图表
    const initCharts = () => {
      // 房源状态图表
      const houseStatusChart = echarts.init(document.getElementById('houseStatusChart'))
      houseStatusChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['已出租', '空置', '维修中']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月']
        },
        series: [
          {
            name: '已出租',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [20, 22, 25, 28, 30],
            itemStyle: {
              color: '#67c23a'
            }
          },
          {
            name: '空置',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [8, 7, 5, 4, 3],
            itemStyle: {
              color: '#f56c6c'
            }
          },
          {
            name: '维修中',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [2, 1, 0, 1, 0],
            itemStyle: {
              color: '#e6a23c'
            }
          }
        ]
      })

      // 空置率图表
      const vacancyRateChart = echarts.init(document.getElementById('vacancyRateChart'))
      vacancyRateChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '房源状态',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 85, name: '已出租', itemStyle: { color: '#67c23a' } },
              { value: 35, name: '空置', itemStyle: { color: '#f56c6c' } },
              { value: 8, name: '其他', itemStyle: { color: '#909399' } }
            ]
          }
        ]
      })

      // 响应式调整图表大小
      window.addEventListener('resize', () => {
        houseStatusChart.resize()
        vacancyRateChart.resize()
      })
    }

    // 组件挂载后初始化图表
    onMounted(() => {
      initCharts()
    })

    return {
      user,
      overview,
      chartFilter,
      recentActivities,
      showAllActivities,
      visibleActivities,
      toggleActivityView
    }
  }
}
</script>

<style scoped>
.home-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #e9eef3;
  color: white;
  padding: 0 20px;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  margin-right: 30px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  color: white;
}

.el-dropdown-link .el-avatar {
  margin-right: 10px;
}

.main-content {
  flex: 1;
  padding: 20px;
}

.overview-cards {
  margin-bottom: 20px;
}

.card-content {
  display: flex;
  align-items: center;
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
  font-size: 24px;
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.chart-area {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recent-activity {
  margin-top: 20px;
}
</style>